<template>
    <div class="czyc">
        <div class="czyc-top">
            <el-form :model="form" ref="form" label-width="80px" :inline="true" size="normal">
                <el-form-item label="行政区划">
                    <el-cascader v-model="form.addvcd" :options="xzqhdata" :props="xzqhprop" ref="xzqh"
                        @change="xzqhorgChange" :clearable="true"></el-cascader>
                </el-form-item>
                <el-form-item label="测站编码">
                    <el-input v-model="form.stcd" placeholder="请输入测站编码"></el-input>
                </el-form-item>
                <el-form-item label="测站名称">
                    <el-input v-model="form.stnm" placeholder="请输入测站名称"></el-input>
                </el-form-item>
                <span class="topjczlb">
                    <el-form-item label="监测站类别">
                        <el-select v-model="form.sttp" placeholder="请选择">
                            <el-option v-for="item in czlx" :key="item.statusid" :label="item.statusname"
                                :value="item.statusid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </span>
            </el-form>
            <div class="top-button">
                <el-button size="default" @click="chaxun"><i class="iconfont icon-sousuo"></i> 查 询</el-button>
                <el-button size="default" @click="chongzhi"><i class="el-icon-refresh"></i> 重 置</el-button>
                <el-dropdown size="small" placement="bottom" trigger="click" @command="batchOperate"
                    style="margin-left: 10px;">
                    <el-button class="search-btn" size="default">
                        <i class="el-icon-upload2"></i>
                        导 出
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="batch_remarks">导出列表</el-dropdown-item>
                        <el-dropdown-item command="export_excel">导出测站</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="czyc-middle">
            <el-table class="tableBox" :data="tableData" stripe height="90%" border
                @selection-change="handleSelectChange" :row-class-name="tableRowClassName"
                :header-cell-style="{ background: '#b2dffe', color: '#000' }" style="width: 100%">
                <el-table-column type="selection" align="center" width="50">
                </el-table-column>
                <el-table-column type="index" label="序号" align="center" width="50" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-text="pagesize * (currentPage - 1) + 1 + scope.$index"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="stcd" label="监测站编码" width="200" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="stnm" label="监测站名称" width="250" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="addvnm" label="行政区划" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="sttp" label="监测站类别" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                        <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                        <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                        <span v-if="scope.row.sttp == 3">统测站</span>
                    </template>
                </el-table-column>
                <el-table-column prop="minz,maxz" label="水位阈值(m)" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{ scope.row.minz }}-{{ scope.row.maxz }}
                    </template>
                </el-table-column>
                <el-table-column prop="minbd,maxbd" label="埋深阈值(m)" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        {{ scope.row.minbd }}-{{ scope.row.maxbd }}
                    </template>
                </el-table-column>
                <el-table-column prop="ts" label="修改时间" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" width="100" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <i class="iconfont icon-chakan" title="查 看" @click="chakan(scope.row)"></i>&nbsp;
                        <i class="el-icon-edit" title="编辑" @click="bianji(scope.row)"></i>&nbsp;
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 查看对话框 -->
        <el-dialog :visible.sync="dialogVisible" width="80%" class="ckdialog" :append-to-body="true">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.ckdhktitle }}监测站阈值修改记录</span>
                    <!-- <i class="el-icon-circle-close"></i>; -->
                </div>
            </div>
            <div class="center">
                <el-table class="tableBox" :data="tableData1" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" stripe border style="width:100%">
                    <el-table-column prop="date" label="基本信息" width="180">
                        <el-table-column prop="stcd" label="测站编码" style="background-color: red" align="center"
                            width="180">
                        </el-table-column>
                        <el-table-column prop="stnm" label="测站名称" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="addvnm" label="行政区划" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sttp" label="监测站类别" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.sttp == 0">国家级基本监测站</span>
                                <span v-if="scope.row.sttp == 1">省级基本监测站</span>
                                <span v-if="scope.row.sttp == 2">普通基本监测站</span>
                                <span v-if="scope.row.sttp == 3">统测站</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-table class="tableBox" :data="tableData2" stripe height="235" :row-class-name="tableRowClassName"
                    :header-cell-style="{ background: '#b2dffe', color: '#000' }" border style="width: 100%">
                    <el-table-column prop="date" label="阈值修改记录" width="180">
                        <el-table-column label="序号" type="index" align="center" width="180">
                        </el-table-column>
                        <el-table-column label="原值" align="center" :show-overflow-tooltip="true">
                            <el-table-column prop="orgZThreshold" label="水位阈值(m)" align="center"
                                :show-overflow-tooltip="true">

                                <!-- <template slot-scope="scope">
                                    {{ scope.row.orgminz }}-{{ scope.row.orgmaxz }}
                                </template> -->
                            </el-table-column>
                            <el-table-column prop="orgBdThreshold" label="埋深阈值(m)" align="center"
                                :show-overflow-tooltip="true">
                                <!-- <template slot-scope="scope">
                                    {{ scope.row.orgminbd }}-{{ scope.row.orgmaxbd }}
                                </template> -->
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="minbd,maxbd" label="变更值" align="center" :show-overflow-tooltip="true">
                            <el-table-column prop="zthreshold" label="水位阈值(m)" align="center"
                                :show-overflow-tooltip="true">
                                <!-- <template slot-scope="scope">
                                    {{ scope.row.minz }}-{{ scope.row.maxz }}
                                </template> -->
                            </el-table-column>
                            <el-table-column prop="bdThreshold" label="埋深阈值(m)" align="center"
                                :show-overflow-tooltip="true">
                                <!-- <template slot-scope="scope">
                                    {{ scope.row.minbd }}-{{ scope.row.maxbd }}
                                </template> -->
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="ts" label="修改时间" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ckdhkxz"><i class="iconfont icon-xiazai-" title="下载"></i>&nbsp;下 载
                </el-button>
            </span>
        </el-dialog>
        <!-- 编辑对话框 -->
        <el-dialog :visible.sync="bjdialogVisible" width="46%" class="bjdialog" :append-to-body="true">
            <div slot="title" class="dialog-title">
                <div class="button-right">
                    <span>{{ this.bjdhktitle }}监测站阈值修改</span>
                    <!-- <i class="el-icon-circle-close"></i>; -->
                </div>
            </div>
            <el-form :model="bjform" ref="form" label-width="90px" :inline="true" size="normal">
                <el-form-item label="水位最小值">
                    <el-input v-model="bjform.minz"></el-input>
                </el-form-item>
                <el-form-item label="水位最大值">
                    <el-input v-model="bjform.maxz"></el-input>
                </el-form-item>
                <el-form-item label="埋深最小值">
                    <el-input v-model="bjform.minbd"></el-input>
                </el-form-item>
                <el-form-item label="埋深最大值">
                    <el-input v-model="bjform.maxbd"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="bjdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="bjbaocun">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { czyclbcx, czycyzcx, czycyzbj, czyclbdc, xzqhlist, qylx, czyclbdhkdc } from '@/api/index'
import exprotFile from "@/utils/exportFile"
export default {
    data() {
        return {
            // 主页头部表单
            form: {
                addvcd: '220000',//行政区划
                stcd: '',
                stnm: '',
                sttp: '',
            },
            xzqhdata: [],//行政区划
            xzqhprop: {
                label: "addvnm",
                value: "addvcd",
                children: "addvcds",
                checkStrictly: true,
            },
            czlx: [],// 测站类型下拉框数组内容
            dialogVisible: false,//查看对话框
            tableData: [], // 主页表格内容
            // 底部页码
            pagesize: 10,
            currentPage: 1,
            total: 10,
            tableData1: [],//查看对话框第一个表格
            tableData2: [],//查看对话框第二个表格
            bjdialogVisible: false,//编辑对话框
            bjform: {
                minbd: '',
                maxbd: '',
                minz: '',
                maxz: '',
                orgmaxbd: '',
                orgmaxz: '',
                orgminbd: '',
                orgminz: ''
            },
            ckdhktitle: '',
            bjdhktitle: '',
            multipleSelection: [],//获取多个测站，多选
            obj: {},//查看对话框导出所获参数
            stcd: ''
        }
    },
    mounted() {
        this.xzqhlist();//获取行政区划数据
        this.qylxobj();//获取字典（状态）
        this.czyclbcx();//获取表格数据
    },
    methods: {
        // 获取行政区划
        async xzqhlist() {
            const addvcd = '220000'
            const res = await xzqhlist(addvcd)
            // console.log(res.data.data);
            this.xzqhdata = res.data.data
        },
        // 获取区域类型数据
        async qylxobj() {
            // task_status
            // 获取状态数据
            const zt = 'sttp'
            const res4 = await qylx(zt)
            // console.log(res4);
            this.czlx = res4.data.data
            // console.log(this.czlx);
        },
        // 获取表格数据
        async czyclbcx() {
            const czycobj = {
                addvcd: '220000',
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                stcd: this.form.stcd,
                stcdArray: [],
                stnm: this.form.stnm,
                sttp: this.form.sttp,
            }
            const res = await czyclbcx(JSON.stringify(czycobj))
            // console.log(res);//200
            this.tableData = res.data.data.list
            this.total = res.data.data.total
            // this.total = this.tableData.length
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            val = 10
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.czyclbcx();
        },
        // 表格的隔行颜色改变
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'statistiss-row'
            } else {
                return ''
            }
        },
        // 导出按钮的切换
        batchOperate(command) {
            switch (command) {
                case "batch_remarks":
                    this.dialogRemarks();
                    break;
                case "export_excel":
                    this.exportExcel();
                    break;
            }
        },
        // 获取多组测站数据
        handleSelectChange(val) {
            console.log(val);
            this.multipleSelection = val
            // console.log(this.multipleSelection);
        },
        // 导出测站
        exportExcel() {
            // console.log(111)
            // 删除时arr接收选中数据的自增id
            let arr = []
            for (let i = 0; i < this.multipleSelection.length; i++) {
                arr.push(this.multipleSelection[i].stcd)
            }
            // 将数组内的值从小到大排序，
            arr.sort()
            let arr1 = arr.sort()
            // console.log(arr.sort());
            const daochuobj = {
                addvcd: '220000',
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                status: this.form.status,
                stcd: this.form.stcd,
                stcdArray: arr1,
                stnm: this.form.stnm,
                sttp: this.form.sttp
            }
            czyclbdc(JSON.stringify(daochuobj)).then(res => {
                // console.log(res);//200
                //利用封装的下载文件js
                exprotFile.getExcel(res.data, "多个测站异常数据统计");
            })
            // for (let a = 0; a < arr.length; a++) {
            //     // 这一步就已经删除成功了
            //     // this.tableData.splice(arr[a] - a, 1)
            //     // if (arr[a] != arr[a + 1]) {

            //     // }
            // }
        },
        // 导出列表
        dialogRemarks() {
            console.log(222)
            const daochuobj = {
                addvcd: '220000',
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                status: this.form.status,
                stcd: this.form.stcd,
                stcdArray: this.multipleSelection,
                stnm: this.form.stnm,
                sttp: this.form.sttp
            }
            czyclbdc(JSON.stringify(daochuobj)).then(res => {
                // console.log(res);//200
                //利用封装的下载文件js
                exprotFile.getExcel(res.data, "测站异常数据统计");
            })
        },
        // 行政区划改变
        xzqhorgChange(val) {
            this.form.addvcd = val.slice(-1).toString();
            this.$refs.xzqh.dropDownVisible = false;
        },
        // 重置
        chongzhi() {
            this.form.addvcd = '220000'
            this.form.stcd = ''
            this.form.stnm = ''
            this.form.sttp = ''
            this.form.status = ''
            this.currentPage = 1
            this.pagesize = 10
            this.czyclbcx();
        },
        // 查询功能
        chaxun() {
            const czycobj = {
                addvcd: this.form.addvcd,
                pageInfo: {
                    pageIndex: this.currentPage,
                    pageSize: this.pagesize
                },
                stcd: this.form.stcd,
                stcdArray: [],
                stnm: this.form.stnm,
                sttp: this.form.sttp,
            }
            // console.log(czycobj);
            czyclbcx(JSON.stringify(czycobj)).then(res => {
                this.tableData = res.data.data.list
                this.total = res.data.data.total
                this.tableData.map((item, index, arr) => {
                    if (item.sttp == '0') {
                        item.sttp = '国家级基本监测站'
                    } else if (item.sttp == '1') {
                        item.sttp = '省级基本监测站'
                    } else if (item.sttp == '2') {
                        item.sttp = '普通基本监测站'
                    } else if (item.sttp == '3') {
                        item.sttp = '统测站'
                    }
                })
                // console.log(res);
            })
        },
        // 查看对话框
        chakan(row) {
            // console.log(row);
            this.ckdhktitle = row.stnm
            this.dialogVisible = true
            let ckdhkarr = [{
                stcd: '',
                stnm: '',
                addvnm: '',
                sttp: ''
            }]
            ckdhkarr.map((item, index, arr) => {
                item.stcd = row.stcd
                item.stnm = row.stnm
                item.addvnm = row.addvnm
                item.sttp = row.sttp
            })
            this.tableData1 = ckdhkarr
            let ckdhkarr2 = {
                addvnm: '',
                maxbd: '',
                maxz: '',
                minbd: '',
                stcd: '',
                sttp: '',
                stnm: ''
            }
            ckdhkarr2.addvnm = row.addvnm
            ckdhkarr2.maxbd = row.maxbd
            ckdhkarr2.maxz = row.maxz
            ckdhkarr2.minz = row.minz
            ckdhkarr2.minbd = row.minbd
            ckdhkarr2.stcd = row.stcd
            ckdhkarr2.sttp = row.sttp
            ckdhkarr2.stnm = row.stnm
            // ckdhkarr2.map((item, index, arr) => {
            //     item.addvnm = row.addvnm
            //     item.maxbd = row.maxbd
            //     item.maxz = row.maxz
            //     item.minbd = row.minbd
            //     item.minz = row.minz
            //     item.stcd = row.stcd
            //     item.sttp = row.sttp
            //     item.stnm = row.stnm
            // })
            this.obj = ckdhkarr2
            // 查看对话框第二个表格内容
            // let ckdhkarr1 = [{
            //     minz: '',
            //     maxz: '',
            //     minbd: '',
            //     maxbd: '',
            //     orgmaxbd: '',
            //     orgmaxz: '',
            //     orgminbd: '',
            //     orgminz: '',
            //     ts: '',
            // }]
            // ckdhkarr1.map((item, index, arr) => {
            //     item.minz = row.minz
            //     item.maxz = row.maxz
            //     item.minbd = row.minbd
            //     item.maxbd = row.maxbd
            //     item.orgmaxbd = this.bjform.orgmaxbd
            //     item.orgmaxz = this.bjform.orgmaxz
            //     item.orgminbd = this.bjform.orgminbd
            //     item.orgminz = this.bjform.orgminz
            //     item.ts = row.ts
            // })
            // // console.log(row);
            // this.tableData2 = ckdhkarr1
            czycyzcx(row.stcd).then(res => {
                // console.log(res.data.data);
                this.tableData2 = res.data.data
                // this.tableData2 = JSON.stringify(res.data)
                // console.log(this.tableData2);
            })
        },
        // 查看对话框下载
        ckdhkxz() {
            // this.dialogVisible = false
            // console.log(this.obj);
            czyclbdhkdc(this.obj).then(res => {
                // console.log(res);
                exprotFile.getExcel(res.data, "测站阈值修改记录");
            })
        },
        // 编辑对话框
        bianji(row) {
            console.log(row);
            this.bjdialogVisible = true
            this.bjform = row
            this.bjdhktitle = row.stnm
            this.stcd = row.stcd
            this.bjform.orgmaxbd = row.maxbd
            this.bjform.orgmaxz = row.maxz
            this.bjform.orgminbd = row.minbd
            this.bjform.orgminz = row.minz
        },
        // 编辑确定
        bjbaocun() {
            this.bjdialogVisible = false
            const czycbjobj = {
                minz: this.bjform.minz,
                maxz: this.bjform.maxz,
                minbd: this.bjform.minbd,
                maxbd: this.bjform.maxbd,
                orgmaxbd: this.bjform.orgmaxbd,
                orgmaxz: this.bjform.orgmaxz,
                orgminbd: this.bjform.orgminbd,
                orgminz: this.bjform.orgminz,
                stcd: this.stcd
            }
            // console.log(czycbjobj);
            czycyzbj(JSON.stringify(czycbjobj)).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.$message({
                        type: 'success',
                        duration: 3000,
                        message: '修改成功'
                    })
                    this.czyclbcx();
                } else {
                    this.$message({
                        type: 'error',
                        duration: 3000,
                        message: '修改失败'
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
html,
body {
    height: 100%;
}

.czyc {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    ::v-deep .czyc-top {
        width: 97%;
        height: 10%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        /* border: 1px solid red; */

        .el-form {
            /* width: 75%; */
            height: 100%;
            float: left;

            .el-form-item {
                padding-top: .625rem;
                padding-right: .625rem;

                .el-form-item__label {
                    background-color: #0055ab;
                    color: #fff;

                    .el-input {
                        width: 11rem;

                        .el-input__inner {
                            width: 100%;
                        }
                    }
                }

                .el-form-item__content {
                    line-height: 0;
                }
            }
        }

        .top-button {
            /* width: 25%; */
            height: 100%;
            padding-top: .625rem;
            float: right;

            .el-button {
                background-color: #0055ab;
                color: #fff;

                .iconfont {
                    font-size: .875rem;
                }
            }
        }
    }

    ::v-deep .czyc-middle {
        width: 97%;
        height: 90%;
        margin: 0 auto;
        box-sizing: border-box;

        .el-table {
            width: 100%;
            height: 90%;
            background-color: rgb(243, 243, 243);
            padding-top: .625rem;

            .el-table__header-wrapper {}

            .el-table__body-wrapper {
                .el-icon-delete:before {
                    font-size: 1rem;
                    cursor: pointer;
                }

                .el-icon-edit {
                    cursor: pointer;
                }

                .iconfont {
                    cursor: pointer;
                }
            }
        }

        .bottom {
            width: 100%;
            height: 10%;

            .el-pagination {
                position: absolute;
                bottom: 3%;
                right: 6%;
            }
        }
    }
}

/* 控制top表单的宽度 */
/deep/.czyc-top .el-input {
    width: 130px !important;

    .el-input__inner {
        width: 100%;
    }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: .375rem; // 横向滚动条
    height: .125rem; // 纵向滚动条 必写
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: .1875rem;
}

/* 表格的行高 */
/deep/ .tableBox {
    th {
        padding: 0 !important;
        height: 3.125rem;
        line-height: 3.125rem;
    }

    td {
        padding: 0 !important;
        height: 2.5rem;
        line-height: 2.5rem;
    }
}


// 鼠标经过颜色
/deep/ .el-table__body tr:hover>td {
    background-color: #d9effe !important;
}

/* 列标题的字体颜色 */
/deep/ .el-table th.el-table__cell>.cell {
    color: #000;
}

/* 内容的字体颜色 */
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
    color: #000;
}

/* 表格隔行改变的颜色 */
/deep/ .el-table__row.statistiss-row {
    background-color: #f2faff;
}

/* @media all and (max-width:720px) and (min-width:320px) {

    body {

        background-color: red;

    }

    @media all and (max-width:320px) {

        body {

            background-color: blue;

        }

    }
} */
/* 去掉滚动条上方的小方块背景色 */
/deep/ .czyc-middle .el-table--border th.el-table__cell.gutter:last-of-type {
    background: rgb(243, 243, 243);
    border: none;
}

/deep/ .el-table thead.is-group th.el-table__cell {
    background-color: #b2dffe;
}

/* 查看对话框 */
/deep/ .ckdialog {
    width: 80%;
    height: 72%;
    margin: 0 auto;
    box-sizing: border-box;

    .el-dialog {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        .el-dialog__header {
            padding-bottom: 1.25rem;
            background-color: #eee;
            height: 12%;
            box-sizing: border-box;
        }

        /* 查看对话框标题的大小和颜色 */
        .dialog-title {
            .button-right {
                span {
                    font-size: 1.25rem;
                    color: #0055ab;
                }
            }
        }

        .el-dialog__body {
            padding: 0 20px !important;
            height: 73%;
            box-sizing: border-box;
            margin-top: .625rem !important;
        }

        /* 查看对话框底部下载按钮 */
        .el-dialog__footer {
            width: 100%;
            height: 15%;
            text-align: center;
            box-sizing: border-box;

            .el-button {
                background-color: #0055ab;
                color: #fff;
            }
        }
    }
}

/deep/ .bjdialog {
    width: 20%;
    height: 40%;
    margin: 0 auto;
    box-sizing: border-box;

    .el-dialog {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        .el-dialog__header {
            padding-bottom: 1.25rem;
            background-color: #eee;
            height: 18%;
            box-sizing: border-box;

            /* 查看对话框标题的大小和颜色 */
            .dialog-title {
                .button-right {
                    span {
                        font-size: 1.25rem;
                        color: #0055ab;
                    }
                }
            }
        }

        .el-dialog__body {
            padding: 0 20px;
            height: 60%;
            box-sizing: border-box;
            margin-top: .625rem;
        }

        /* 查看对话框底部下载按钮 */
        .el-dialog__footer {
            width: 100%;
            height: 22%;
            text-align: center;
            box-sizing: border-box;

            .el-button {
                background-color: #0055ab;
                color: #fff;
            }
        }
    }
}

/deep/ .dialog-title {
    .button-right {
        span {
            font-size: 1.25rem;
            color: #0055ab;
        }
    }
}

/deep/ .el-dialog__footer {
    width: 100%;
    height: 15%;
    text-align: center;
    box-sizing: border-box;

    .el-button {
        background-color: #0055ab;
        color: #fff;
    }
}

/deep/ .el-dialog__header {
    padding-bottom: 1.25rem;
    background-color: #eee;
    height: 12%;
    box-sizing: border-box;
}

/deep/ .topzhuangt {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 3.375rem !important;
            /* text-align: center !important; */
        }
    }
}

/deep/.topjczlb {
    .el-form-item {
        .el-form-item__label {
            /* color: red !important; */
            width: 5.875rem !important;
            /* text-align: center !important; */
        }
    }
}
</style>